<%-- 
    Document   : template
    Created on : Aug 18, 2014, 5:50:08 AM
    Author     : HT
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>List request</title>


<link type="text/css" href='${pageContext.request.contextPath}/resources/signin/css/dataTables.bootstrap.css' rel='stylesheet'>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/signin/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/signin/js/getListTransactionRequest.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="resources/main/css/bootstrap.min.css"
	rel="stylesheet">
<link type="text/css"
	href="resources/main/css/bootstrap-responsive.min.css" rel="stylesheet">
<link type="text/css" href="resources/main/css/theme.css"
	rel="stylesheet">
<link type="text/css" href="resources/main/css/font-awesome.css"
	rel="stylesheet">
<link type="text/css"
	href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
	rel='stylesheet'>
<%-- 
    Java Script
    --%>
<script src="resources/main/js/jquery-1.9.1.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/jquery-ui-1.10.1.custom.min.js"
	type="text/javascript"></script>
<script src="resources/main/js/bootstrap.min.js" type="text/javascript"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/paging.js"></script>
<script type="text/javascript"
	src="resources/main/js/tablecontroll/sorttable.js"></script>
<script src="resources/main/js/bloglogon.js" type="text/javascript"></script>

<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.extensions.js"></script>
<script type="text/javascript"
	src="resources/main/js/jquery.inputmask.date.extensions.js"></script>
	
		
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<%@include file="head-banner.jsp"%>
		<!-- /navbar-inner -->
	</div>
	<!-- /navbar -->
	<div class="wrapper">
		<div class="container">
			<div class="row">
				<%@include file="left-banner.jsp"%>
				<!--/.span3-->
				<div class="span9">
					<div class="content" style="width: 100%">
						<div class="module message">
							<div class="module-head">
								<h3>User Management</h3>
							</div>
							<div class="module-option clearfix">
									<!-- Search by name -->
									<div>
									<form id="btnSearchRequestTransactionByName" action="searchAccountRequestTransactionByName" method="post">
										<div class="input-append pull-left">
											<input id="txtSearchByFirstName" type="text" class="span3"
												placeholder="Search By Name..." name="txtSearchByFirstName" autocomplete="off" spellcheck="false">
												<button type="submit" class="btn">
												<i class="icon-search"></i>
											</button>
												
												
											
										</div>
									</form>	
									
									
										<a id="btnShowAdvanceSearch"
											style="float: left; padding-left: 10px; padding-right: 10px; padding-top: 5px">Advance
											Search</a>
											
									</div>
									<br>
									<br>
									<div id="panelAdvanceSearch"
										style="text-align: left; display: none;">
										<!-- Search advance -->
										<form id="btnSearchAccountRequestTransactionAdvance" action="searchAccountRequestTransactionAdvance.html" method="post">
										
										<div style="display: block">
											<div class="" style="width: 220px; float: left">
												<label for="">Username: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="txtUserNameImpact"
														placeholder="Username" name="txtUserNameImpact">
												</div>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px;">
												<label for="">Assignee: </label>
												<div class="controls row-fluid">
													<input class="span12" type="text" id="txtUserNameAffected"
														placeholder="Assignee" name="txtUserNameAffected">
												</div>
											</div>
										</div>
										<div style="display: block; clear: both">
											<div class="" style="width: 220px; float: left;">
												<label for="">Date Range: </label> <input class=""
													type="text" id="txtFromDate" placeholder="From" style="float: left" name="txtFromDate" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px;">
												<label for="" style="color: white">invisible</label> <input
													class="" type="text" id="txtToDate" placeholder="To"
													style="float: left;" name="txtToDate" data-inputmask="'alias': 'yyyy-mm-dd'" data-mask>
											</div>
										</div>
										<div style="display: block; clear: both">
											<div class="" style="width: 220px; float: left;">
												<label class="control-label" for="basicinput">Role:</label>
												<select tabindex="1" data-placeholder="" class="span8"
													style="width: 220px;" name="cbbRole" id="cbbRole">
													<option value="">All</option>
													<option value="Account Admin">Account Admin</option>
													<option value="Account Support">Account Support</option>
													<option value="Report Support">Report Support</option>
												</select>
											</div>
											<div class=""
												style="width: 220px; float: left; margin-left: 30px">
												<label class="control-label" for="basicinput">Status:</label>
												<select tabindex="1" data-placeholder="" class="span8"
													style="width: 220px;" name="cbbStatus" id="cbbStatus">
													<option value="">All</option>
													<option value="5">Completed</option>
													<option value="6">Rejected</option>
												</select>
											</div>
										</div>
										<div class="" style="clear: both">
											<div class="controls clearfix">
												<button type="submit" class="btn btn-primary pull-left"
													style="margin-left: 15px;">Search</button>
												<button type="button" id="btnHideAdvanceSearch"
													class="btn btn-primary pull-left"
													style="margin-left: 15px;">Hide</button>
											</div>
										</div>
										</form>
									</div>
								</form>
							</div>
							<div class="module-body table dataTable" id="tableContent">
								<table class="table table-message sortable" id="request_transaction_by_account">
								<thead>
								<tr class="heading">
											<td class="cell-check sorting_asc" aria-controls="request_transaction_by_account" aria-label="#: activate to sort column ascending" aria-sort="ascending" style="width: 1%; text-align: center">
												#</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Role: activate to sort column ascending" aria-sort="ascending" style="width: 13%; text-align: center">
												Role</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Username: activate to sort column ascending" aria-sort="ascending" style="width: 10%; text-align: center">
												Username</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Full Name: activate to sort column ascending" aria-sort="ascending" style="width: 21%; text-align: center">
												Full Name</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Assignee: activate to sort column ascending" aria-sort="ascending" style="width: 15%; text-align: center">
												Assignee</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Action: activate to sort column ascending" aria-sort="ascending" style="width: 15%; text-align: center">
												Action</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Command: activate to sort column ascending" aria-sort="ascending" style="width: 15%; text-align: center">
												Command</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Date: activate to sort column ascending" aria-sort="ascending" style="width: 15%; text-align: center">
									 			Date</td>
											<td class="cell-check sorting" aria-controls="request_transaction_by_account" aria-label="Status: activate to sort column ascending" aria-sort="ascending" style="width: 10%; text-align: center">
												Status</td>
										</tr>
								</thead>
									<tbody>
								
									</tbody>
								</table>
								<div class="pagination pagination-centered" id="pageNavPosition">
							</div>
							
							</div>
							<div class="module-foot">
								<!--/.content-->
							</div>
						</div>
					</div>
					<!--/.content-->
				</div>
				<!--/.span9-->
			</div>
		</div>
		<!--/.container-->
	</div>
	<!--/.wrapper-->
	<div class="footer">
		<%@include file="footer.jsp"%>
	</div>
</body>
<script type="text/javascript"
	src="resources/main/autocomplete/typeahead.bundle.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.js"></script>
<script type="text/javascript"
	src="resources/main/autocomplete/bootstrap3-typeahead.min.js"></script>
	
<script type="text/javascript">
	var numberOfRow = $("#numberOfRow").val();
	//Init paging
	//Set number of row per pages
	var pager = new Pager('table_Report_Transaction', 15);
	pager.init();
	pager.showPageNav('pager', 'pageNavPosition');
	pager.showPage(1);
	//End - Init paging
</script>

<script type="text/javascript">
            $(function() {
                //Datemask dd/mm/yyyy
                $("#datemask").inputmask("dd-mm-yyyy", {"placeholder": "dd-mm-yyyy"});
                //Money Euro
                $("[data-mask]").inputmask();})
                </script>
                	
<script type="text/javascript">

$(document).ready(function(){
	$.get('autoCompleteRequestTransactionAccountSearchName.json',
			function(data) {
				$("#txtSearchByFirstName").typeahead({
					source : data
				});
			}, 'json');
});

</script>
<script>

	$(document).ready(function() {
		
	
		
		$("#chkTimeOut").click(function() {
			var checkbox = document.getElementById("chkTimeOut");
			if (checkbox.checked == true) {
				document.getElementById("txtTimeOut").value = "30";
			} else {
				document.getElementById("txtTimeOut").value = "0";
			}
		});

		$("#btnShowAdvanceSearch").click(function() {
			$("#panelAdvanceSearch").slideDown("slow");
		});

		$("#btnHideAdvanceSearch").click(function() {
			$("#panelAdvanceSearch").slideUp("slow");
		});
		
		
		
		/* $("#btnSearch").click(function(event){
			event.preventDefault();
			alert("dzo dzo");
		
			var value = $("#txtSearchByFirstName").val();
			
			alert("dzo dzo" + value);
			$.ajax({
				  type: "POST",
				  url: "http://localhost:8080/finalproject/searchAccountRequestTransactionByNameJSON/"+value+".json",
				  contentType: 'application/json',
				  success: function(data) {
				   
					
					  alert(data.id+ data.name);
					  
				  }
				});
		}); */
		
		
		// Search By Name
		$("#btnSearchRequestTransactionByName").submit(function(event){
			event.preventDefault();

		
			var value = $("#txtSearchByFirstName").val();
			
			jQuery.ajax({
			    url: '${pageContext.request.contextPath}/searchAccountRequestTransactionByNameJSON/'+value+'.json',
			    method: 'POST',
			    contentType: 'application/json',
			    data: $('#btnSearchRequestTransactionByName').serialize()
			}).done(function (data) {
			    // Do something with the response
				
				$("#tableContent")
				.append(
						"<div class=\"pagination pagination-centered\" id=\"pageNavPosition\"></div>");
				var length =data.length;
				$("#request_transaction_by_account > tbody").html("");
				
				if (length == 0) {
					var content = '<tr>';
					content += '<td colspan="9" style="text-align:center;">';
					content += 'No matching request transactions found';
					content += '</td>';
					content += '</tr>';
					$("#request_transaction_by_account > tbody").append(content);
				} else {
				for(var i =0;i<length;i++)
				{	

					var content ="<tr>";					
					content+="<td class='cell-author hidden-phone hidden-tablet' style='text-align: center'>"+data[i].transactionId+"</td>";
					content+="<td class='cell-author hidden-phone hidden-tablet' style='text-align: center'>"+ data[i].accImpact.systemAccountType.typeName+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accImpact.accountLoginId+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accImpact.accountFirstName+ " " + data[i].accImpact.accountLastName + " " + data[i].accImpact.accountMidName +" </td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accAffected.accountLoginId+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].actionTransaction+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].command+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].dateTransaction+"</td>";
					if(data[i].systemStatus.statusId == 5){
						content+="<td class='cell-status hidden-phone hidden-tablet'><b class='due' style='background-color: green'>Complete</b></td>"
					}else if(data[i].systemStatus.statusId == 6){
						content+="<td class='cell-status hidden-phone hidden-tablet'><b class='due' style='background-color: red'>Reject</b></td>"
					}
					
					content+="</tr>";
					
					$("#request_transaction_by_account > tbody").append(content);
				}
				}
				pager = new Pager('request_transaction_by_account', 15);
				pager.init();
				pager.showPageNav('pager', 'pageNavPosition');
				pager.showPage(1);
				$('#request_transaction_by_account').dataTable();
				
				
			}).fail(function () {
			    // Whoops; show an error.
				alert("failed");
			});

		});
		
		// Search Advance
		$("#btnSearchAccountRequestTransactionAdvance").submit(function(event){
			event.preventDefault();

		
			var accImp = $("#txtUserNameImpact").val();
			var accAff = $("#txtUserNameAffected").val();
			var fromDate = $("#txtFromDate").val();
			var toDate = $("#txtToDate").val();
			var cbRole = $("#cbbRole").val();
			var cbStatus = $("#cbbStatus").val();
		
			if(accImp ==""){
				accImp = "null";
			}
			if(accAff==""){
				accAff = "null";
			}
			if(fromDate==""){
				fromDate = "null";
			}
			if(toDate==""){
				toDate = "null";
			}
			if(cbRole==""){
				cbRole = "null";
			}
			if(cbStatus==""){
				cbStatus = "null";
			}
			
			jQuery.ajax({
			    url: '${pageContext.request.contextPath}/searchAccountRequestTransactionAdvanceJSON/' + accImp + '/' + accAff + '/' + fromDate + '/' + toDate + '/' + cbRole + '/' + cbStatus +'.json',
			    method: 'POST',
			    contentType: 'application/json',
			    data: $('#btnSearchAccountRequestTransactionAdvance').serialize()
			}).done(function (data) {
			    // Do something with the response
				
				$("#tableContent")
				.append(
						"<div class=\"pagination pagination-centered\" id=\"pageNavPosition\"></div>");
				var length =data.length;
				$("#request_transaction_by_account > tbody").html("");
				
				if (length == 0) {
					var content = '<tr>';
					content += '<td colspan="9" style="text-align:center;">';
					content += 'No matching request transactions found';
					content += '</td>';
					content += '</tr>';
					$("#request_transaction_by_account > tbody").append(content);
				} else {
				for(var i =0;i<length;i++)
				{	

					var content ="<tr>";					
					content+="<td class='cell-author hidden-phone hidden-tablet' style='text-align: center'>"+data[i].transactionId+"</td>";
					content+="<td class='cell-author hidden-phone hidden-tablet' style='text-align: center'>"+ data[i].accImpact.systemAccountType.typeName+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accImpact.accountLoginId+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accImpact.accountFirstName+ " " + data[i].accImpact.accountLastName + " " + data[i].accImpact.accountMidName +" </td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].accAffected.accountLoginId+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].actionTransaction+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].command+"</td>";
					content+="<td class='cell-title' style='text-align: center'>"+ data[i].dateTransaction+"</td>";
					if(data[i].systemStatus.statusId == 5){
						content+="<td class='cell-status hidden-phone hidden-tablet'><b class='due' style='background-color: green'>Complete</b></td>"
					}else if(data[i].systemStatus.statusId == 6){
						content+="<td class='cell-status hidden-phone hidden-tablet'><b class='due' style='background-color: red'>Reject</b></td>"
					}
					
					content+="</tr>";
					
					$("#request_transaction_by_account > tbody").append(content);
				}
				}
				pager = new Pager('request_transaction_by_account', 15);
				pager.init();
				pager.showPageNav('pager', 'pageNavPosition');
				pager.showPage(1);
				$('#request_transaction_by_account').dataTable();
				
				
			}).fail(function () {
			    // Whoops; show an error.
				alert("failed");
			});

		});
		
		
		
	});
</script>
</html>
